<!-- 菜单明细 -->
<template>
  <!-- 子目录 -->
  <q-expansion-item v-if="hasChildren" v-model="open" :header-inset-level="level" :group="'defaultGroup' + level">
    <template #header>
      <q-item-section avatar> <q-icon :name="menu.icon" /> </q-item-section>
      <q-item-section> {{ menu.title }} </q-item-section>
    </template>
    <div class="submenu">
      <sidebar-item v-for="child in menu.children" :key="child.path" :item="child" :level="level + 0.4" />
    </div>
  </q-expansion-item>

  <!-- 菜单项 -->
  <q-item v-else v-ripple clickable exact v-bind="linkObj" :inset-level="level" active-class="menu-active">
    <q-item-section avatar> <q-icon :name="menu.icon" /> </q-item-section>
    <q-item-section> {{ menu.title }} </q-item-section>
  </q-item>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import { ref, computed, watch, onMounted } from 'vue';

  import { MenuVO } from 'src/api/login';
  // 属性
  const props = defineProps({
    item: { required: true, type: Object },
    level: { type: Number, default: 0 },
  });

  const menu = props.item as MenuVO;
  const hasChildren = computed(() => menu.children && menu.children.length > 0);
  // 添加链接
  const linkObj = menu.isLink ? { target: '_blank', href: menu.path } : { to: menu.path };

  const open = ref(false);
  const route = useRoute();
  const changeOpen = () => {
    if (menu.children) {
      for (let item of menu?.children) {
        if (item.path === route.path) {
          open.value = true;
          return;
        }
      }
    }
    open.value = false;
  };
  watch(route, () => changeOpen());
  onMounted(() => changeOpen());
</script>

<style lang="scss" scoped>
  .menu-list {
    .q-item__section--avatar {
      min-width: 34px !important;
    }
    .q-item__section--side > .q-icon {
      font-size: 18px;
    }
    .menu-active {
      color: #409eff;
    }
    .submenu {
      background-color: #1f2d3d;
    }
  }

  .body--dark {
    .submenu {
      background-color: $dark-page;
    }
  }
</style>
